<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script>
        window.onload=function(){
            Vue.component('my-child',{
                data(){
                    return{}
                },
                props:{
                    num:{
                        type:Number,
                        required:true
                    }
                },
                render(createElement){
                    //js代码
                    //createElement是一个函数，创建标签，简写为h
                    /* createElement的可选参数
                        第一个参数：创建的标签名称/组件
                        第二个参数：给当前标签添加的属性对象
                        第三个参数：给当前标签添加的子元素数组 */
                    return createElement('h'+this.num,{
                        style:{
                            color:'red'
                        }
                    },['default-',this.$slots.default]);    
                }
                /* template:`
                    <div>
                        <h1 v-if='num==1'><slot></slot></h1>
                        <h2 v-else-if='num==2'><slot></slot></h2>
                        <h3 v-else-if='num==3'><slot></slot></h3>
                        <h4 v-else-if='num==4'><slot></slot></h4>
                        <h5 v-else-if='num==5'><slot></slot></h5>
                        <h6 v-else><slot></slot></h6>
                    </div>
                ` */
            })
            new Vue({
                el:'#app',
                data:{},
                methods:{},
                components:{
                    'my-parent':{
                        data(){
                            return{
                                num:1
                            }
                        },
                        template:`
                            <div>
                                <h1>my-parent</h1>
                                <my-child :num='num'>hello</my-child>
                            </div>
                        `
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <my-parent></my-child>
    </div>
</body>
</html>